<template>
  <div>
    <div class="head">
      <div class="head_logo"></div>
      <div class="head_ulnk">
        <router-link class="iconfont icon-search" tag="span" to="/search"></router-link>
        <router-link class="but_client iconfont icon-wode" tag="span" to="/userinfo"></router-link>
      </div>
    </div>
    <div class="nav">
      <router-link to="/Home" tag="div">首页</router-link>
      <router-link to="/About" tag="div">分类</router-link>
      <router-link to="/rank" tag="div">排行</router-link>
      <router-link to="/bookshelf" tag="div">书架</router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
 .nav {
    height: 40px;
    line-height: 40px;
    display: flex;
    text-align: center;
    div {
      width: 25%;
      font-size: 16px;
      color: #a1a1a1;
      background-color: #333333;
      &.com {
        color: #f2f2f2;
        background-color: #454545;
      }
    }
  }
  .head {
    display: flex;
    margin: 8px 10px;
    justify-content: space-between;
    align-items: center;
    .head_logo {
      background-size: 150px;
      height: 28px;
      width: 150px;

      background-image: url(https://static.zongheng.com/h5/v2016/images/pics.png);
      background-repeat: no-repeat;
    }
    .head_ulnk {
      span {
        color: rgb(153, 151, 151);
        font-size: 20px;
      }
      .icon-search {
        padding-right: 10px;
      }
      .but_client {
        padding-left: 10px;
        margin-left: 5px;
        border-left: 1px solid #d3d3d3;
      }
    }
  }
</style>